<template>
  <div class="search-box">

    <div v-for="item in searchData" :key="item.prop">
      <n-date-picker v-if="item.type === 'date'" v-model:value="pageData.listQuery[item.prop]" start-placeholder="开始日期"
        type="daterange" clearable end-placeholder="结束日期" class="date" />

      <n-input v-if="item.type === 'input'" v-model:value="pageData.listQuery[item.prop]" type="text"
        :placeholder="item.name" class="input" />

      <n-select v-if="item.type === 'select'" v-model:value="pageData.listQuery[item.prop]" :options="item.options"
        :placeholder="item.name" class="select" />
    </div>

    <n-space class="btn-box" v-if="searchData.length > 0">
      <n-button class="search-btn" strong secondary type="info" @click="handleSearch">搜索</n-button>
      <n-button class="reset-btn" strong secondary type="tertiary" @click="handleRest">重置</n-button>
    </n-space>

  </div>
</template>

<script setup lang="ts">
import { computed, reactive } from 'vue';


const emit = defineEmits(['getSearchData'])

interface IProps {
  search: Record<string, any>
}

const props = defineProps<IProps>()

const searchData = computed(() => props.search)

const pageData = reactive({
  listQuery: {}
})


/**
 * 查询对象初始化
 */
const init = () => {
  searchData.value.forEach(item => {
    if (item.type === 'input' || item.type === 'select') {
      pageData.listQuery[item.prop] = ''
    }
    if (item.type === 'date') {
      pageData.listQuery[item.prop] = null
    }
  });
}
init()

/**
 * 搜索栏搜索事件
 */
const handleSearch = () => {
  emit('getSearchData', pageData.listQuery)
}

/**
 * 搜索栏重置事件
 */
const handleRest = () => {
  init()
  emit('getSearchData', pageData.listQuery)
}

</script>

<style scoped lang="less">
@import '@/styles/mixin.less';

.search-box {
  .flex(row, flex-start, center);

  .date {
    margin-right: 15px;
  }

  .input {
    margin-right: 15px;
    width: 200px;
  }

  .select {
    margin-right: 15px;
    width: 100px;
  }
}
</style>